import React, { useEffect } from 'react';

function append(content, container = 'content', tagname = 'p') {
  const tag = document.createElement(tagname);
  const text = document.createTextNode(content);
  tag.appendChild(text);
  document.getElementById(container).appendChild(tag);
}

function reflect() {
  const obj = {
    foo: '123',
    bar: '456',
  };

  const proxy = new Proxy(obj, {
    get(target, property) {
      return Reflect.get(target, property);
    },
  });

  append(JSON.stringify(proxy));

  const object = {
    name: '张三',
    age: 18,
  };

  append(Reflect.has(object, 'name'));
  append(Reflect.deleteProperty(object, 'age'));
  append(Reflect.ownKeys(object));
}

export default function Async() {
  useEffect(reflect, null);

  return (
    <div id="content">
      <p>reflect</p>
    </div>
  );
}
